<template>
  <div class="c-menu" :class="{'el-menu--collapse':collapse}">
    <template v-for="m in this.menuData">
      <el-submenu v-if="m.children.length>0 && !m.hiddenMenu" :key="m.id" :index="formatUrl(m)">
        <template slot="title">
          <i :class="m.icon" class="iconfont menu-icon"></i>
          <span slot="title">{{ m.resourceName}}</span>
        </template>
        <c-menu :menuData="m.children"></c-menu>
      </el-submenu>
      <template v-else>
        <el-menu-item  :index="formatUrl(m)" :key="m.id"  v-if="!m.hiddenMenu">
          <i :class="m.icon" class="iconfont menu-icon"></i>
          <span slot="title">{{ m.resourceName }}</span>
        </el-menu-item>
      </template>

    </template>
  </div>
</template>

<script>
export default {
  name: 'c-menu',
  props: ['menuData', 'activeName', 'collapse'],
  methods: {
    formatUrl (m) {
      const url = m.viewUrl || m.id
      const isExternal = url.startsWith('http')
      if (isExternal) {
        return '/externalSite?src=' + url
      }
      return url
    }
  }
}
</script>

<style lang="scss" scoped>
  .layout {
    position: relative;
  }
  .menu-icon{
    margin-right: 8px;
  }
</style>
<style lang="scss">
  .c-menu{
    .el-menu {
      border: none !important;
      background-color: $menu-bg-color;
    }
    .el-submenu .el-menu-item, .el-submenu__title {
      font-size: 16px;
      color: #fff !important;
      i{
        color: #fff !important;
      }
      &.is-active, &:hover {
        background-color: $active-menu-color !important;
        opacity: 0.3;
        color: #fff !important;
      }
      &.is-active{
        border-color: $--color-primary;
        border-left: 4px solid rgba(0, 0, 0, 0);
      }
    }

    .el-submenu.is-active {
      .el-submenu__title {
        i, span {
          color: #fff !important;
        }
      }
    }
    .el-menu-item {
      &.is-active {
        color: #fff !important;
      }
  }

  .el-menu-item {
    color: #fff !important;
    i{
      color: #fff !important;
    }
    &.is-active,&:hover {
      background-color: $active-menu-color !important;
      // opacity: 0.3;
      color: #fff !important;
    }
    &.is-active{
      border-color: $--color-primary;
      border-left: 4px solid rgba(0, 0, 0, 0);
    }
    font-size: 16px;
    &:focus{
      background: none;
    }
  }
    .el-icon-arrow-down:before {
      content: "\e790";
    }
  }
  .el-menu--popup{
    .el-menu-item{
      i,span{
        color: $base-font-color !important;
        opacity: 1;
      }
      &.is-active,&:hover{
        background-color: transparent !important;
        opacity: 1;
        i,span{
          color: $--color-primary !important;
        }
      }
    }
  }
</style>
